<template>
  <div>
    <!--头部内容-->
    <div class="root"
         style="height: 80px;display: flex;align-items: center;justify-content: space-between;"
    >
      <div style="margin-left: 5%;color:#fff">
        <div style="font-size: 1.2rem;
          font-weight: bold;line-height: 1.5;cursor: pointer;display: -webkit-box;
          -webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;" title="酒店客服预约"
        >
        </div>
      </div>
      <!--模块区域-->
      <div class="model" style="padding: 0 4vh;border: 1px solid #eee;border-radius: 30px;background: #E4E7ED;">
        <div v-for="(item,index) in dhlList"
             class="nav" :class="['nav', { 'active': NavIndex === index }]"
             @click="selectNav(index)">
          <i :class="item.icon" style="font-size: 25px;margin-bottom: 1vh;"/>
          <div style="font-size: 16px;font-family:  MingLiU_HKSCS-ExtB, serif;font-weight: bold;">{{
              item.content
            }}
          </div>
        </div>
      </div>
      <!--个人信息 + 其他模块 + 路由-->
      <div style="display: flex;justify-content: center;align-items: center;margin-right: 5%">
        <el-dropdown class="avatar-container right-menu-item hover-effect">
          <div style="display: flex;justify-content: center;align-items: center;color:#fff">
            <!--头像-->
            <div class="text-center" style="margin-right: 1vh">
<!--              <userAvatar/>-->
              <img :src="avatar" class="user-avatar">
            </div>
            <span style="font-family: 'MingLiU_HKSCS-ExtB', serif;font-size: 1em;font-weight: bold">个人中心</span>
            <i class="el-icon-caret-bottom"/>
            <el-button v-hasPermi="['jdgl:qwht:export']" @click="toIndex">前往后台管理</el-button>
          </div>
          <el-dropdown-menu slot="dropdown" class="root " style="width: 25vh;">
            <router-link to="/indexs/root/profile">
              <el-dropdown-item class="custom-dropdown-item"
                                style="display: flex;flex-direction: column;justify-content: center;align-items: center">
                <span
                  style="font-family: 'MingLiU_HKSCS-ExtB', serif;font-size: 1em;font-weight: bold;color: #fff">个人中心</span>
              </el-dropdown-item>
            </router-link>
            <el-link :underline='false' @click.native="logout">
              <el-dropdown-item class="dropdown-item custom-dropdown-item" divided
                                style="display: flex;flex-direction: column;justify-content: center;align-items: center">
                <div style="font-family: 'MingLiU_HKSCS-ExtB', serif;font-size: 1em;font-weight: bold;color: #fff">退出登录
                </div>
              </el-dropdown-item>
            </el-link>

          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>


    <router-view/>
  </div>
</template>

<script>
import userAvatar from "@/views/system/user/profile/userAvatar.vue";
import {mapGetters} from "vuex";

export default {
  components: {userAvatar},
  name: "index",
  data() {
    return {
      dhlList: [
        {
          icon: 'el-icon-help',
          content: '酒店客房预约',
          path:'/indexs/root/sy', //首页路径
        },
        {
          icon: 'el-icon-help',
          content: '我的预约',
          path:'/indexs/root/wdyy', //首页路径
        },
      ],
      NavIndex: 0, // 导航栏默认选在第一个
    }
  },
  methods: {
    toIndex() {
      this.$router.push({
        path:"/admin/index"
      })
    },
    // 退出登录
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {
      });
    },
    // 获取当前导航栏的下标
    selectNav(index) {
      this.NavIndex = index;
      // 页面跳转
      this.$router.push(this.dhlList[index].path);
    },
  },
  created() {
    console.log('首页')
    // 获取当前的router路径
    const toPath = this.$route.path;
    this.NavIndex = this.dhlList.findIndex(item => item.path === toPath);
  },
  computed:{
    ...mapGetters([
      'avatar',
    ]),
  }

}
</script>

<style scoped>
.user-avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.root {
  background: url("../../assets/images/top_bg.jpg") repeat-y;
}

::v-deep .custom-dropdown-item:hover {
  background-color: #0D5B86FF !important;
}
/*导航栏样式*/
.nav {
  background: transparent;
  transition: all 0.5s ease;
  color: #000;
  border: 1px solid #eee;
  display: inline-block;
  padding: 0.3vh 5vh;
  border-radius: 30px;
  text-align: center;
  cursor: pointer;
}

.nav:hover {
  background: #1C56BA;
  border-color: #1C56BA;
  color: #fff;

}
/*点击后的样式*/
.nav.active {
  background: #0D5B86FF !important;
  border-color: #0D5B86FF !important;
  color: #fff !important;
}

/*模块部分的模块超出高度的滚动条样式*/
.model {
  max-width: 65% !important;
  min-width: 10% !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  white-space: nowrap;
}

.model::-webkit-scrollbar {
  height: 6px;
}

.model::-webkit-scrollbar-thumb {
  background-color: rgba(164, 215, 239, 0.35);
  border-radius: 8px;
}

.model::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
</style>
